<template>
  <div class="form-preview">
    <div 
      v-for="field in fields" 
      :key="field.id"
      class="preview-field"
    >
      <!-- 日期时间组 -->
      <template v-if="field.type === 'dateTimeGroup'">
        <DateTimeGroupRender :fieldData="field.value" :suffix="field.suffix" />
      </template>

      <!-- 单选带输入框 -->
      <template v-if="field.type === 'radioWithInput'">
        <RadioWithInputRender :fieldData="field.value" />
      </template>





      <!-- 文本域字段 -->
      <template v-if="field.type === 'textareaField'">
        <TextareaFieldRender :fieldData="field.value" />
      </template>
      




      <!-- 标准表格 -->
      <template v-if="field.type === 'criteriaTable'">
        <CriteriaTableRender :fieldData="field.value" />
      </template>

      <!-- 横向选项 -->
      <template v-if="field.type === 'horizontalOptions'">
        <HorizontalOptionsRender :fieldData="field.value" />
      </template> 

      <!-- 竖向选项 -->
      <template v-if="field.type === 'verticalOptions'">
        <VerticalOptionsRender :fieldData="field.value" />
      </template>

      <!-- 文本输入框 -->
      <template v-if="field.type === 'textInputField'">
        <TextInputFieldRender :fieldData="field.value" />
      </template>

      <!-- 粘贴单 -->
      <template v-if="field.type === 'pasteUnit'">
        <PasteUnitRender :fieldData="field.value" />
      </template>

      <!-- 图片 -->
      <template v-if="field.type === 'imageField'">
        <ImageFieldRender :model-value="field.value" />
      </template>

      <!-- 签字日期 -->
      <template v-if="field.type === 'signatureDate'">
        <SignatureDateFieldRender :fieldData="field.value" />
      </template>

      <!-- 递归渲染子字段 -->
      <template v-if="field.children?.length">
        <div class="preview-nested-fields">
          <form-preview :fields="field.children" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import RadioWithInputRender from '../render/RadioWithInputRender.vue'

import TextareaFieldRender from '../render/TextareaFieldRender.vue'

import DateTimeGroupRender from '../render/DateTimeGroupRender.vue'
import TextInputFieldRender from '../render/TextInputFieldRender.vue'
import PasteUnitRender from '../render/PasteUnitRender.vue'
import SignatureDateFieldRender from '../render/SignatureDateFieldRender.vue'
import ImageFieldRender from '../render/ImageFieldRender.vue'


import CriteriaTableRender from '../render/CriteriaTableRender.vue'
import HorizontalOptionsRender from '../render/HorizontalOptionsRender.vue'
import VerticalOptionsRender from '../render/VerticalOptionsRender.vue'

export default {
  name: 'FormPreview',
  components: {
    RadioWithInputRender,

    TextareaFieldRender,

    DateTimeGroupRender,
    TextInputFieldRender,
    PasteUnitRender,
    SignatureDateFieldRender,
    ImageFieldRender,


    CriteriaTableRender,
    HorizontalOptionsRender,
    VerticalOptionsRender,
  },
  props: {
    fields: {
      type: Array,
      required: true
    }
  },
  methods: {
    formatNumber(num, width = 0) {
      if (!num && num !== 0) return '_'.repeat(width || 1)
      const str = num.toString()
      return width ? str.padStart(width, '0') : str
    }
  }
}
</script>

<style lang="scss" scoped>
.form-preview {
    width: 1200px;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 auto;
    overflow: hidden;

  .preview-field {
    margin-bottom: 24px;
  }

  .preview-paragraph {
    margin: 0 0 16px 0;
  }

  .preview-underline {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    border-bottom: 1px solid #000;
    margin: 0 4px;
  }

  .preview-checkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    margin: 0 4px;
    font-family: sans-serif;
  }



  .preview-radio-textarea {
    .preview-options {
      margin-bottom: 8px;
    }

    .preview-textarea {
      margin-left: 24px;
      padding: 8px;
      background: #f5f7fa;
      border-radius: 4px;
      min-height: 60px;
    }
  }



  .preview-nested-fields {
    margin-left: 24px;
    margin-top: 8px;
    padding-left: 8px;
    border-left: 2px solid #eee;
  }

  .preview-nested-group {
    padding-left: 20px;
    border-left: 2px solid #eee;
    margin: 16px 0;

    .preview-nested-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      padding-left: 16px;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        width: 12px;
        height: 2px;
        background-color: #eee;
      }

      .item-prefix {
        color: #666;
        padding-top: 4px;
      }

      .item-content {
        flex: 1;
      }

      .sub-nested-fields {
        margin-top: 16px;
        margin-left: 24px;
        padding-left: 16px;
        border-left: 2px solid #eee;
      }
    }
  }
}
</style> 